﻿@page "/CanvasMultiLine"

@using System.Diagnostics.CodeAnalysis
@using System.Drawing;
@using System.Reflection

@inject IJSRuntime jsRuntime


<style>
    #imageContainer {
        position: relative;
        width: 600px; /* 根据需要设置 */
        height: 400px; /* 根据需要设置 */
        overflow: hidden;
    }

        #imageContainer img {
            display: block;
        }

        #imageContainer svg {
            position: absolute;
            top: 0;
            left: 0;
        }

    #myCanvas {
        z-index: 1; /* 确保 canvas 在 img 之上 */
        position: absolute; /* 或者 relative, fixed, sticky */
    }
</style>

<h3>CanvasMultiLine</h3>

@* <div id="imageContainer" style=" width: 600px; height: 400px;">
    <canvas id="myCanvas" width="600" height="400" src=https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png>
    </canvas>

</div> *@
<input value="@PointJson" style="width: 600.56px; " />
<input @bind-value="@Width" style="width: 120px; " />
<input @bind-value="@Height" style="width: 120px; " />
<Button Text="Update Width/Height" OnClick="UpdateClick" />
<Button Text="Draw" OnClick="DrawClick" />
<Button Text="ClearDraw" OnClick="ClearDrawClick" />

<div id="divCanvas" style="position: relative; width: 600px; height: 400px;">
    <canvas id="myCanvas" width="@Width" height="@Height">
    </canvas>
    <img id="myImage" src="@imageUrl" width="@Width" height="@Height" style="position: absolute; top: 0; left: 0;" />
</div>

@* <div style="position: relative; width: 600px; height: 400px;">
    <canvas id="myCanvas" width="600" height="400">
    </canvas>
    <img src="@imageUrl" style="width: 600px; height: 400px; position: absolute; top: 0; left: 0;" />

</div> *@

<script src="./CanvasMultiLine.js"></script>

@code {

    private string imageUrl = "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?0";

    private bool isMouseDown = false;

    private System.Drawing.Point? startPoint;

    private System.Drawing.Point? endPoint;

    private string PointJson = "123";

    private int Width { get; set; } = 600;

    private int Height { get; set; } = 400;

    private DotNetObjectReference<CanvasMultiLine> dotNetObjectReference;

    private bool isCanDraw = false;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("import", "./CanvasMultiLine.js");
        await jsRuntime.InvokeVoidAsync("import", "./Resizer.js");
        if (firstRender)
        {
            await jsRuntime.InvokeVoidAsync("eval", @"
                function resizeImage(elementId, width, height) {
                    var img = document.getElementById(elementId);
                    if (img) {
                        img.style.width = width + 'px';
                        img.style.height = height + 'px';
                    }
                }
            ");

            // dotNetObjectReference = DotNetObjectReference.Create(this);
            // await jsRuntime.InvokeVoidAsync("initCanvas", dotNetObjectReference);
        }
    }



    [JSInvokable("MouseDown")]
    public async Task MouseDown(int x, int y)
    {
        if (!isCanDraw) return;
        isMouseDown = true;
        startPoint = new System.Drawing.Point(x, y);
    }

    [JSInvokable("MouseMove")]

    public async Task MouseMove(int x, int y)
    {
        if (!isCanDraw) return;
    }

    [JSInvokable("MouseUp")]
    public async Task MouseUp(int x, int y)
    {
        if (isMouseDown)
        {
            endPoint = new System.Drawing.Point(x, y);
            await DrawAsync();

            var line = new LineInfo
                {
                    StartY = startPoint.Value.Y,
                    EndX = endPoint.Value.X,
                    EndY = endPoint.Value.Y,
                    StartX = startPoint.Value.X,
                };
            PointJson = System.Text.Json.JsonSerializer.Serialize(line);
            base.StateHasChanged();
        }
        isMouseDown = false;
    }

    private async Task DrawAsync()
    {
        await jsRuntime.InvokeVoidAsync("drawLine", startPoint.Value.X, startPoint.Value.Y, endPoint.Value.X, endPoint.Value.Y);
    }

    public class LineInfo
    {
        public double StartX { get; set; }
        public double StartY { get; set; }

        public double EndX { get; set; }
        public double EndY { get; set; }
    }

    private async Task DrawClick()
    {
        isCanDraw = true;
        dotNetObjectReference = DotNetObjectReference.Create(this);
        await jsRuntime.InvokeVoidAsync("initCanvas", dotNetObjectReference);
    }

    private async Task ClearDrawClick()
    {
        isCanDraw = false;
        await jsRuntime.InvokeVoidAsync("clearCanvas");
    }

    private async Task UpdateClick()
    {
        //await jsRuntime.InvokeVoidAsync("resizeImage", "myImage", Width, Height);
        await jsRuntime.InvokeVoidAsync("resizeImage", "divCanvas", Width, Height);
    }
}
